<template>
  <div class="home-page">
    <div class="grid">
      <div class="header">
        <h1 style="text-align: center;">Welcome!</h1>
        <p>Discover and rate your favorite movies</p>
      </div>
      <MovieCard v-for="movie,index in movieList" :key="movie.id" :movie="movie" :index="index" :style="{ 'grid-area': `card${index+1}` }"/>
      <button @click="getMovieList" id="fresh">
        换一批
        <span class="refresh-icon">⟳</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from "@/axios/request.js";
import { ElMessage } from "element-plus";
import { base64DataToImgURL } from "@/utils/Base64Util.js";
import MovieCard from './MovieCard.vue'
import router from "@/router/index.ts";

const movieList = ref([]);

onMounted(() => {
  getMovieList()
})

// 随机获得电影列表
function getMovieList() {
  request.get('/movie/randomlist?size=9'
  ).then(res => {
    if (res.code !== 200) {
      console.log('获取电影列表失败')
      ElMessage.error('获取电影列表失败')

    } else {
      movieList.value = res.data
      for (let i = 0; i < movieList.value.length; i++)
        if (movieList.value[i].img != null && movieList.value[i].img.length > 0)
          movieList.value[i].img_url = base64DataToImgURL(movieList.value[i].img)
      console.log(movieList.value)
      console.log(res.data)
      console.log('获取电影列表成功')
    }

  })
}

// 跳转到电影详情页面
function movieInfo(id) {
  console.log('跳转到电影详情页面')
  console.log(id)
  router.push(
    {
      path: '/movieInfo',
      query: { "movie_id": id },
    }
  )
}

</script>

<style scoped>
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;

}

.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.home-page {
  overflow: scroll;
  width: 100%;
  min-height: 100%;
  background-color: #1a1a1a;
  background-image: linear-gradient(30deg, #222 12%, transparent 12.5%, transparent 87%, #222 87.5%, #222),
  linear-gradient(150deg, #222 12%, transparent 12.5%, transparent 87%, #222 87.5%, #222),
  linear-gradient(30deg, #222 12%, transparent 12.5%, transparent 87%, #222 87.5%, #222),
  linear-gradient(150deg, #222 12%, transparent 12.5%, transparent 87%, #222 87.5%, #222),
  linear-gradient(60deg, #222 25%, transparent 25.5%, transparent 75%, #222 75%, #222);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-top: 3rem;
  color: white;
  grid-area: header;
}

.header h1 {
  font-size: 2.5rem;
  margin: 0;
  background: linear-gradient(45deg, #ff4d4d, #ff8533);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.header p {
  color: #888;
  margin-top: 0.5rem;
}

.grid {
  display: grid;
  justify-items: center;
  justify-items: center;
  grid-template-columns: minmax(2rem, 1fr) repeat(3, minmax(200px, 300px)) minmax(2rem, 1fr);
  grid-template-rows: auto repeat(3, auto) auto;
  grid-template-areas:
    'header header header header header'
    'left card1 card2 card3 right'
    'left card4 card5 card6 right'
    'left card7 card8 card9 right'
    'footer footer fresh_button . .';
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

#fresh {
  grid-area: fresh_button;
  width: 200px;
  height: 50px;
  margin: 2rem auto;
  background: linear-gradient(45deg, #ff4d4d, #ff8533);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#fresh:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3);
}

.refresh-icon {
  font-style: normal;
  font-size: 1.2rem;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: minmax(1rem, 1fr) repeat(2, minmax(200px, 1fr)) minmax(1rem, 1fr);
    grid-template-areas:
      'header header header header'
      'left card1 card2 right'
      'left card3 card4 right'
      'left card5 card6 right'
      'left card7 card8 right'
      'left card9 fresh_button right';
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: minmax(1rem, 1fr) minmax(200px, 1fr) minmax(1rem, 1fr);
    grid-template-areas:
      'header header header'
      'left card1 right'
      'left card2 right'
      'left card3 right'
      'left card4 right'
      'left card5 right'
      'left card6 right'
      'left card7 right'
      'left card8 right'
      'left card9 right'
      'left fresh_button right';
    gap: 1rem;
  }
}
</style>

